<!--
 * @Description: 常规设置
 * @Author: xuzp4
 -->
<template>
  <div class="parent d-flex flex-column">
    <div class="top d-flex">
      <div class="left mr-15">
        <div class="header d-flex jc-between">
          {{ $t("changguishezhi.datetime") }}
        </div>
        <el-form :model="formData" label-width="120px">
          <el-form-item :label="$t('changguishezhi.time_format') + ':'">
            <el-select v-model="formData.time_format">
              <el-option
                v-for="item in dateFormatList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('changguishezhi.timeFormat') + ':'">
            <el-select v-model="timeFormat">
              <el-option
                v-for="item in timeFormatList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('changguishezhi.time_zone') + ':'">
            <el-select v-model="formData.time_zone">
              <el-option
                v-for="item in time_zone_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('changguishezhi.sys_time') + ':'">
            <MyDatePicker
              v-model="formData.sys_time"
              :format="formData.time_format"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <div class="header d-flex jc-between">
          {{ $t("changguishezhi.ntp_set") }}
        </div>
        <el-form :model="formData2" label-width="120px">
          <el-form-item :label="$t('changguishezhi.ntp_set') + ':'">
            <el-select v-model="formData2.ntp_disable">
              <el-option
                v-for="item in ntp_disable_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('changguishezhi.ntp_server') + ':'">
            <el-input
              v-model="formData2.url"
              :disabled="formData2.ntp_disable == '1'"
            />
          </el-form-item>
          <el-form-item :label="$t('changguishezhi.ntp_cycle') + ':'">
            <el-input-number
              :disabled="formData2.ntp_disable == '1'"
              v-model="formData2.ntp_cycle"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="bottom d-flex jc-center ai-center">
      <MyButton class="confirm" icon="el-icon-info" @click="handleSetDefault">{{
        $t("changguishezhi.default")
      }}</MyButton>
      <MyButton class="confirm" icon="el-icon-refresh" @click="handleRefresh">{{
        $t("changguishezhi.refresh")
      }}</MyButton>
      <MyButton class="confirm" icon="el-icon-check" @click="handleConfirm">{{
        $t("common.confirm")
      }}</MyButton>
    </div>
  </div>
</template>

<script>
import { findNTP, setNTP, findSystemTime, setSystemTime } from "./service";
import MyButton from "@/components/Button";
import MyDatePicker from "@/components/DatePicker";
import moment from "moment";
import util from "@/utils";
export default {
  components: {
    MyButton,
    MyDatePicker,
  },
  data() {
    const defaultFomData2 = {
      ntp_disable: "0",
      url: "pool.ntp.org",
      ntp_cycle: 10,
    };
    const defaultFormData = {
      time_zone: "GMT+08:00",
      time_format: "yyyy-MM-dd HH:mm:ss",
    };
    return {
      dateFormatList: [
        { label: this.$t("changguishezhi.ymd"), value: "yyyy-MM-dd HH:mm:ss" },
        { label: this.$t("changguishezhi.dmy"), value: "dd-MM-yyyy HH:mm:ss" },
        { label: this.$t("changguishezhi.mdy"), value: "MM-dd-yyyy HH:mm:ss" },
      ],
      timeFormatList: [
        { label: this.$t("changguishezhi.twentyFour"), value: "HH:mm:ss" },
      ],
      timeFormat: "HH:mm:ss",
      formData: {},
      defaultFomData2,
      defaultFormData,
      formData2: {},
      ntp_disable_list: [
        { label: this.$t("changguishezhi.enable"), value: "0" },
        { label: this.$t("changguishezhi.disable"), value: "1" },
      ],
      time_zone_list: [
        { label: "GMT+01:00", value: "GMT+01:00" },
        { label: "GMT+02:00", value: "GMT+02:00" },
        { label: "GMT+03:00", value: "GMT+03:00" },
        { label: "GMT+04:00", value: "GMT+04:00" },
        { label: "GMT+05:00", value: "GMT+05:00" },
        { label: "GMT+06:00", value: "GMT+06:00" },
        { label: "GMT+07:00", value: "GMT+07:00" },
        { label: "GMT+08:00", value: "GMT+08:00" },
        { label: "GMT+09:00", value: "GMT+09:00" },
        { label: "GMT+10:00", value: "GMT+10:00" },
        { label: "GMT+11:00", value: "GMT+11:00" },
        { label: "GMT+12:00", value: "GMT+12:00" },
        { label: "GMT-01:00", value: "GMT-01:00" },
        { label: "GMT-02:00", value: "GMT-02:00" },
        { label: "GMT-03:00", value: "GMT-03:00" },
        { label: "GMT-04:00", value: "GMT-04:00" },
        { label: "GMT-05:00", value: "GMT-05:00" },
        { label: "GMT-06:00", value: "GMT-06:00" },
        { label: "GMT-07:00", value: "GMT-07:00" },
        { label: "GMT-08:00", value: "GMT-08:00" },
        { label: "GMT-09:00", value: "GMT-09:00" },
        { label: "GMT-10:00", value: "GMT-10:00" },
        { label: "GMT-11:00", value: "GMT-11:00" },
        { label: "GMT-12:00", value: "GMT-12:00" },
      ],
    };
  },
  watch: {
    ["formData.time_format"]: {
      handler(val) {
        this.$nextTick(() => {});
      },
    },
  },
  mounted() {
    this.findNTP();
    this.findSystemTime();
  },
  methods: {
    async findNTP() {
      const res = await findNTP();
      this.$set(this, "formData2", res.data);
    },
    async setNTP() {
      const params = {
        ...this.formData2,
      };
      return await setNTP(params);
    },
    async findSystemTime() {
      const res = await findSystemTime();
      this.$set(this, "formData", res.data);
    },
    async setSystemTime() {
      const params = {
        ...this.formData,
      };
      return await setSystemTime(params);
    },
    async handleConfirm() {
      const [res1, res2] = await Promise.all([
        this.setNTP(),
        this.setSystemTime(),
      ]);
      if (res1.code == 0 && res2.code == 0) {
        util.msg.success("edit_success");
      }
    },
    async handleSetDefault() {
      this.$set(this, "formData2", { ...this.defaultFomData2 });
      this.$set(this, "formData", {
        ...this.defaultFormData,
        sys_time: moment().format("YYYY-MM-DD HH:mm:ss"),
      });
    },
    handleRefresh() {
      this.findNTP();
      this.findSystemTime();
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  height: 100%;
  font-size: 14px;
  display: flex;
  .left,
  .right {
    padding: 20px;
    height: 100%;
    flex: 1;
    background: #ffffff;
    border-radius: 20px 20px;
    .header {
      background: #fafafc;
      border-radius: 20px 20px 0 0;
      height: 56px;
      padding: 0 20px;
      font-size: 20px;
    }
    /deep/ .el-input {
      width: auto;
    }
  }
  .bottom {
    margin-top: 20px;
    width: 100%;
  }
}
</style>
